<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		
		
		<style>
		   *{margin: 0;padding: 0;box-sizing: border-box;}
		   .clearfix:after{display: block;clear: both;content: "";}
			#zong{width: 402px;border: 1px solid;margin: 50px auto;}
			header>div{float: left;width: 100px;height: 40px;background: darkgray;text-align: center;
			   line-height: 40px;border: 1px solid;}
			   
			footer{position: relative;margin-top: 40px;}   
			footer>div{width: 400px;height: 400px;font-size: 50px;color: red;text-align: center;
			   line-height: 400px;border: 1px solid;position: absolute;top: 0;display: none;
			   background: lightseagreen;} 
			   
			.color{background: lightgray;}
			.show{display: block;}     
		</style>
	</head>
	<body>
		
		<div id="zong">
			<header class="claerfix">
				<div class="color">1</div>
				<div>2</div>
				<div>3</div>
				<div>4</div>
			</header>
			<footer>
				<div class="show">一</div>
				<div>二</div>
				<div>三</div>
				<div>四</div>
			</footer>
		</div>
		
		<script>
		class fen{
			
			constructor(yi){
				this.parent=document.querySelector(yi);
				 this.hea=document.querySelectorAll(".claerfix div")
			     this.foo=document.querySelectorAll("footer div")
			}
			
			show1(){
				var ths=this
				for(let i=0;i<this.hea.length;i++){
				   this.hea[i].index=i
				    this.hea[i].onclick=function(){
					    ths.gong1(i)
				    }
			    }
			}
			
			
			gong1(i){				
					for(var j=0;j<this.hea.length;j++){
						this.hea[j].className=""
						this.foo[j].className=""
						
					}
					this.foo[i].className="show";										
					this.hea[i].className="color"										
			}
			
		}	
		
		class abo extends fen{
			constructor(yi){
				super(yi);
				this.font()
				this.index=0
			}
			
			font(){
				var ths=this;
				
				setInterval(function(){
					ths.index++
					if(ths.index==ths.hea.length){
						ths.index=0;
					}
					ths.gong1(ths.index)
				},1000)
			}
		}
		
		
				//var m=new fen();
				new abo('#zong')
				//m.show1();
			
			
			
		</script>
		
		
		
	</body>
	
</html>
